<template>
	<view class="pay-content">
		<view class="address-section" v-if="orderInfo && orderInfo.addressusername">
			<view class="order-content">
				<image src="/static/addr.png" class="icondizhi"></image>
				<view class="cen">
					<view class="top">
						<text class="name">{{ orderInfo.addressusername }}</text>
						<text class="mobile">{{ orderInfo.addressmobile }}</text>
					</view>
					<text class="address"> {{ orderInfo.addresscity }}{{ orderInfo.addressaddress }}</text>
				</view>
			</view>
		</view>
		
		<view class="goods-section" v-if="orderInfo.goodslist && orderInfo.goodslist.length>0">
			
			<view class="g-item" v-for="(item,index) in orderInfo.goodslist" :key="index">
				<image :src="item.goodsthumb"></image>
				<view class="right">
					<view class="title clamp">{{ item.goodsname }}</view>
					<view  class="spec">{{ item.specname }}</view>
					<view class="price-box ">
						<text class="price" v-if="item.price>0"><text class="text-sm text-gray ">￥</text>{{ item.price }}</text>
						<text class="number">x {{ item.goodsnum }}</text>
					</view>
				</view>
			</view>
			
		</view>
		
		<view class="cu-form-group margin-top" v-if="orderInfo.actualprice>0">
			<view class="title">实付金额</view>
			<input placeholder="" name="input" :value="orderInfo.actualprice"></input>
		</view>
		
		<view class="cu-form-group margin-top" v-if="orderInfo.actualprice>0">
			<view class="title">选择支付方式</view>
		</view>
		<view class="pay-type-list" v-if="orderInfo.actualprice>0">
			<view class="type-item b-b" @click="changePayType(11)" v-if="payInfo.type11 == 1 && ismicromessenger == 0">
				<text class="icon yticon icon-alipay"></text>
				<view class="con">
					<text class="tit">汇付支付宝</text>
					<text>汇付支付</text>
				</view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 11"/></label>
			</view>
			
			<view class="type-item b-b" @click="changePayType(12)" v-if="payInfo.type12 == 1 && ismicromessenger == 1">
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">汇付微信</text>
					<text>汇付支付</text>
				</view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 12"/></label>
			</view>
		</view>
		
		<view class="padding flex flex-direction" style="position: fixed; bottom:0upx; width: 100%;">
			<button class="cu-btn bg-grey lg" @click="submit">立即支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				title: '收银台',
				
				timer: null,
				ismicromessenger: 0,
				isalipay: 0,
				userAgent: '',
				
				payType: 0,
				orderInfo: {
					actualprice: 0,
					goodslist: [],
				},
				payInfo: {} ,
				
				orderno: '',
				orderid: '',
				
				openid: '',
				code: '',
				
				submitshow: false
				
			}
		},
		onUnload() {
			clearInterval(this.timer);
			this.timer = null;
		},
		onHide() {
			if (this.orderInfo.paystatus == 1) {
				clearInterval(this.timer);
				this.timer = null;
				uni.reLaunch({
					url: '/pages/index/paySuccess'
				});
			}
		},
		onLoad(options) {
			
			// #ifdef H5
			let orderno = options.orderno;
			if (orderno && orderno != undefined) {
				this.orderno = options.orderno;
				uni.setStorageSync('orderno', this.orderno);
			}
			// #endif
			
			//获取当前访问的设备------------------------------------------------------------
			// #ifdef H5
			var ua = window.navigator.userAgent.toLowerCase();
			console.log(ua); //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				this.userAgent = "wx";
				this.payType = 12;
			}
			if (ua.match(/AlipayClient/i) == 'alipayclient') {
				this.userAgent = "alipay";
				this.payType = 11;
			}
			// #endif
			
			// #ifdef APP
			this.userAgent = "app";
			// #endif
			
			//获取当前访问的设备------------------------------------------------------------
			
			
			
			// #ifdef H5
			var ua = window.navigator.userAgent.toLowerCase();
			console.log(ua); //mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, like gecko)version/9.0 mobile/13b143 safari/601.1
			if (ua.match(/MicroMessenger/i) == 'micromessenger') {
				this.ismicromessenger = 1;
				if (this.$wechat && this.$wechat.isWechat()) {
					this.openid = this.$api.get('openid');
					console.log('微信openid：'+this.openid);
					if (this.openid == null || this.openid === '' || this.openid == undefined) {
						this.getopenid_wx();
					}
				}
			}
			if (ua.match(/AlipayClient/i) == 'alipayclient') {
				this.isalipay = 1;
			}
			// #endif
			
		},
		onShow() {
			//获取订单信息
			this.getOrderInfo();
			//获取支付信息
			this.getpayinfo();
		},
		methods: {
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			//获取支付信息
			async getpayinfo() {
				const param = {
					token: this.token
				};
				await this.$http.request('Index', 'paytype', 'GET', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.payInfo = res.data.data;
						}
					}
				});
			},
			getOrderInfo() {
				const orderno = uni.getStorageSync('orderno');
				if(orderno){
					this.orderno = orderno;
				}
				if (this.orderno == '' || this.orderno == 0) {
					this.$helper.toast('订单号为空', 'error');
					return;
				}
				
				const param = {
					orderno: this.orderno,
				};
				
				let _this = this;
				this.timer = setInterval(() => {
					this.$http.request('Index', 'orderdetail', 'GET', param, res => {
						if (res.status == 1) {
							if (res.data.error == 0) {
								this.orderInfo = res.data.data;
								this.orderid = res.data.data.id;
								this.submitshow = true;
							}
							else{
								clearInterval(_this.timer);
								_this.timer = null;
							}
						}else{
							clearInterval(_this.timer);
							_this.timer = null;
						}
					});
					if (this.orderInfo.paystatus == 1) {
						clearInterval(_this.timer);
						_this.timer = null;
						uni.reLaunch({
							url: '/pages/order/paySuccess'
						});
					}
				}, 1000);
				
			},
			async submit() {
				var that = this;
				const orderno = uni.getStorageSync('orderno');
				if(orderno){
					this.orderno = orderno;
				}
				
				if (this.orderno == '' || this.orderno == 0) {
					this.$helper.toast('订单号为空', 'error');
					return;
				}
				
				/* 数据验证模块*/
				if (!this.orderInfo.actualprice || this.orderInfo.actualprice <= 0) {
					this.$helper.toast('订单金额错误', 'error');
					return;
				}
				
				const param = {
					orderno: this.orderno,
					openid: this.openid
				};
				
				if (this.payType == 11) {  //三方支付宝  汇付
				
					const param = {};
					param.token = this.token;
					param.orderno = this.orderno;
					param.payType = this.payType;
					await this.$http.request('Bspay', 'ali_pay', 'POST', param, res => {
						if (res.status == 1) {
							if (res.data.error == 0) {
								
								// alipay_qr
								let qrcode_url = res.data.data.expend.qrcode_url;
								// #ifdef H5
								window.location.href = qrcode_url;
								// #endif
								
							}
						}
					});
				} else if (this.payType == 12) { //三方微信  汇付
					
					const param = {};
					param.token = this.token;
					param.orderno = this.orderno;
					param.openid = this.openid;
					param.payType = this.payType;
					await this.$http.request('Bspay', 'wx_pay', 'POST', param, res => {
						if (res.status == 1) {
							if (res.data.error == 0) {
								console.log(res.data.data);
								//微信公众号支付
								var pay_info = res.data.data.data.pay_info;
								console.log(pay_info);
								var response = eval('(' + pay_info+ ')');
								// //{
								// 	"appId":"wx44c1e7ca5013da67",
								// 	"timeStamp":"1698735808",
								// 	"nonceStr":"6f42ec81acaa4a438e481c4e88e14e37",
								// 	"package":"prepay_id=wx31150328830869b5f437bde78b405f0000",
								// 	"signType":"RSA","
								// 	paySign":"djvs6mlIqGAO8QO+9XL/vvay9z5OZVnVxgq7qxMzo04MvlSTDjuCnqYAFY2t+YYdy7NL4rofFC78zmYzyS97+htNIas36wzw+/npZqG7VprRzgTngJvBBo2FCalQaVwxkxyjZj0BcdEdKb4QDO5FwWckinDGJrgKrfNtNpFY9IfEDtjzaLyRCAiurwgsZnBIYzpmNMuSK5jqMCJbEaDEhL8YBHgduE5oc2kz70FQIabuyUbvw/Ayj2dIFG7LLn+deUqOJXhc1340rLK7Meg+VQnEykNVzPxGItxzLZStHUaBLqWjd22CmRqIbVOB4YFcS0F1cuB+mOMSrwHHzenL0Q=="
								// }
								WeixinJSBridge.invoke('getBrandWCPayRequest', {
										"appId": response.appId, //公众号名称，由商户传入
										"timeStamp": response.timeStamp, //时间戳，自1970年以来的秒数
										"nonceStr": response.nonceStr, //随机串
										"package": response.package,
										"signType": response.signType, //微信签名方式：
										"paySign": response.paySign //微信签名
									}, function(ressuccess) {
										console.log('success:' + JSON.stringify(ressuccess));
										if (ressuccess.err_msg == 'get_brand_wcpay_request:ok') {
											that.$helper.toast('支付成功', 'sucess');
											uni.navigateTo({
												url: '/pages/index/paySuccess'
											});
										}else if (ressuccess.err_msg == "get_brand_wcpay_request:cancel") {
											// 支付过程中用户取消
											that.$helper.toast('用户取消');
										}else if (ressuccess.err_msg == "get_brand_wcpay_request:fail") {
											// 支付失败
											that.$helper.toast('支付失败');
										}else{
											that.$helper.toast(ressuccess.err_msg);
										}
										
									}
								);
							}
						}
					});
					
				}else {
					
					this.$helper.toast('选择支付方式', 'error');
					return;
				}
				
			},
			
			// 微信公众号获取openid------------------------------------------------
			getopenid_wx() {
				var local = encodeURIComponent('https://gyl.h5.lvaijiankang.com/#/pages/qrcodepay/index'); // 当前H5页面的url
				var appid = 'wxac0b3aeeb9f4b8df';
				this.code = this.getUrlCode().code; // 截取code
				// 如果没有code，则去请求
				if (this.code == null || this.code === '' || this.code == undefined) {
					var wxUrl =
						'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' +
						appid +
						'&redirect_uri=' +
						local +
						'&response_type=code' +
						'&scope=snsapi_base' +
						'&state=STATE#wechat_redirect';
					window.location.href = wxUrl;
				} else {
					// 存在code 获取openid
					const param = {
						code: this.code
					};
					this.$http.request('Index', 'getopenid_wx', 'POST', param, res => {
						if (res.status == 1) {
							if (res.data.error == 0) {
								console.log(res.data.data);
								this.openid = res.data.data.openid;
								
							}else if (res.data.error == 1) {
								this.$helper.toast('获取openid失败', 'error');
								return;
							}
						}
					});
				}
			},
			
			getUrlCode() {
				// 截取url中的code方法
				var url = location.href; //获取打开的路径
				let winUrl = url;
				var theRequest = new Object();
				if (url.indexOf('?') != -1) {
					var str = url.substr(url.indexOf('?') + 1);
					var strs = str.split('&');
					for (var i = 0; i < strs.length; i++) {
						var items = strs[i].split('=');
						theRequest[strs[i].split('=')[0]] = strs[i].split('=')[1];
					}
				}
				return theRequest;
			},
			
		}
	}
</script>

<style lang="scss">
	
	.pay-content{
		padding-bottom: 100upx;
	}
	
	
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.cu-form-group input {
		text-align: right;
	}


	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;
			padding-top: 20upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 150upx;
				height: 150upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
				height: 80upx;
				line-height: 80upx;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;

				.price {
					margin-bottom: 4upx;
				}

				.m {
					font-size: $font-sm;
					color: $font-color-light;
					margin-right: 10rpx;
				}

				.number {
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}


	.address-section {
		height: 170rpx;
		padding: 30upx 0;
		background: #fff;
		position: relative;

		.title {
			margin-left: 30upx;
			margin-bottom: 10upx;
			color: $font-color-light;
			font-size: 40upx;
			font-weight: 500;
		}

		.order-content {
			display: flex;
			align-items: center;
			margin-bottom: 25upx;
		}

		.icondizhi {
			width: 80upx;
			height: 80upx;
			padding: 10upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}


	}

	.pay-type-list {
		background-color: #fff;
	
		.type-item {
			height: 120upx;
			padding: 20upx 0upx 20upx 60upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position: relative;
		}
	
		.icon {
			width: 80upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}
		.con {
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}
	
	.dikou-type{
		padding-top: 20upx;
		padding-left: 60upx;
		font-size: 30upx;
		color: #ff0000;
	}
	
	.a-bg {
		width: 100%;
		height: 2upx;
	}
</style>